Personal Computer World 2008 May/PersonalComputerWorld-May2008-CoverdiscCD.iso/Software/Full/Nero 7/Installation/Cab/A97B5616.cab/ScrollingB86A6A67.js

JavaScript | 2006-06-28 | 8.7 KB | 231 lines

// when you focus on an item, the browser will automatically scroll it into view. This file provides additional functionality.

// It enables the pg up/dn buttons, and it updates the buttons' positions when scrolling takes place (these positions are needed

// when you move the focus, in order to calculate which other buttons on the page are closest)



function pageUpDown(direction)

{

    // This function determines what to do if the user presses the Page Up (+) or Page Down (-) key



    // Call the getScrollParent function to find the scrollable parent object

    var oScrollParent = getScrollParent()

    if (oScrollParent == null)

    {

        return

    }

    // find correct button to focus on

    var oScrollToBtn = getScrollToButton(oScrollParent, direction);

    oCurFocus = oScrollToBtn;

    oCurFocus.focus();

    // check if scrolling has taken place, and update positions of scrollable elements if needed

    if (didScroll())

    {

        updateScrollPositions()

    }

}



function getScrollParent()

{

    /* For an item to scroll correctly when the user presses the Page Up (+) or Page Down (-) keys, it has to have a parent object that

    has its custom "MCScrollable" attribute set to "true". This function locates that parent object */

    // Start with the object that currently has focus ...

    var oTempObj = oCurFocus

    // ... then check its parent, grandparent, great-grandparent, and so on.

    for (i=0; i<5000; i++)

    {

         oTempObj = oTempObj.parentElement

        // Stop when you get to the scrollable parent element

        if (oTempObj.MCScrollable == "true")

        {

            return oTempObj

        }

        // If you get as high as the BODY tag without finding a scrollable parent element, return null

        if (oTempObj.tagName == "BODY")

        {

            return null

        }

    }

}



function getScrollToButton(oScrollParent, direction)

{

    // This function determines which item to focus on next when the user presses the Page Up (+) or Page Down (-) key



    // find top & bottom of scroll parent relative to top of pg (don't worry about 2 px offset)

    var oBottomVisibleBtn = oCurFocus

    var oTopVisibleBtn = null

    var oLowerBtn

    var oHigherBtn = null

    //var oScrollToBtn

    var oScrollParentPos = oScrollParent.getBoundingClientRect()

    var nScrollParentTop = oScrollParentPos.top

    var nScrollParentBottom = oScrollParentPos.bottom

    var nScrollParentHeight = (nScrollParentBottom - nScrollParentTop)



    // go through all focusable elements in order;

    for (i=0; i<oScrollParent.all.length; i++)

    {

        //identify object

        var obj = oScrollParent.all(i)

        // make sure object is focusable

        if (obj.MCFocusable == "true" && direction == "down")

        {

            //find top of object

            var nObjTop = obj.nTopPos;

            // for the lowest btn whose top is visible (by at least two pixels), assign bottomVisibleBtn to object

            if ((nObjTop + 2) < nScrollParentBottom)

            {

                oBottomVisibleBtn = obj

            }

            // Find lowest button down to one Scroll Parent Height below bottom visible btn

            if (nObjTop < (nScrollParentBottom + nScrollParentHeight))

            {

                oLowerBtn = obj

            }

        }

        if (obj.MCFocusable == "true" && direction == "up")

        {

            var nObjBottom = obj.getBoundingClientRect().bottom;

            // for the first btn that's even partly visible, assign topVisibleBtn to object

            if (nObjBottom > nScrollParentTop && oTopVisibleBtn == null)

            {

                oTopVisibleBtn = obj

            }

            // Find first button that's within one Scroll Parent Height above top visible btn

            if (nObjBottom > (nScrollParentTop - nScrollParentHeight) && oHigherBtn == null)

            {

                oHigherBtn = obj

            }

        }

    }

    if (direction == "up")

    {

        if (oTopVisibleBtn != oCurFocus)

        {

            // if focus is not already on bottom visible btn, move focus to there and end function

            return oTopVisibleBtn

        }

        else

        {

            // If focus is already on bottom visible, focus on button one box height lower

            return oHigherBtn

        }

    }



    if (direction == "down")

    {

        if (oBottomVisibleBtn != oCurFocus)

        {

            // if focus is not already on bottom visible btn, return bottom visible btn and end function

            return oBottomVisibleBtn

        }

        else

        {

            // If focus is already on bottom visible, return button one box height lower than that

            return oLowerBtn

        }

    }

}



function didScroll()

{

    // This function indicates whether current-focus item has scrolled or otherwise moved vertically on the page.

    // If the current-focus item's top position does not equal the position it was in when the page loaded, return true

    if((oCurFocus.getBoundingClientRect().top - 2) != oCurFocus.nTopPos)

    {

        return true

    }

}



function updateScrollPositions()

{

    // object has scrolled; reset "nCenterYCoord" property for all scrolling buttons in box

    // so that auto nav will be based on new positions for buttons

    var oScrollParent = getScrollParent()

    if (oScrollParent == null)

    {

        oScrollParent = body

    }

    // for all objects in the parent container of the scrolling element

    for (i=0; i<oScrollParent.all.length; i++)

    {

        //identify object

        var obj = oScrollParent.all(i)

        // make sure object is focusable

        if (obj.MCFocusable == "true")

        {

            // reassign Y coordinate values for based on its new top position

            var tempObjPosition = obj.getBoundingClientRect();

            obj.nTopPos = tempObjPosition.top - 2

            obj.nBottomPos = tempObjPosition.bottom - 2

            var objCenterTop = (obj.nTopPos+(obj.nHeight/2))

            obj.nCenterYCoord = objCenterTop

        }

    }

}



///////////////////////////////////////////////////////////////////////////////////////////////////

// code for counter that indicates how many buttons are in scrolling menu, etc.



// variable to indicate whether there is a counter on the page

var isCounter = false

// variable to hold array of scrolling buttons

var aScrollBtnsArray



function setCounter()

{

    /* this function sets the numeric value for the item counter found at the lower right of

    each scrollable menu in the templates, to indicate how many focusable items are in the menu. */

    // Reset isCounter value to true, indicating that there is a counter on the page

    isCounter = true

    //Make array for scrolling buttons

    aScrollBtnsArray = new Array()

    // Loop through all focusable items in the scrolling span

    for (i=0; i<scrollspan.all.length; i++)

    {

        var obj = scrollspan.all(i)

        if(obj.MCFocusable == "true")

        {

            var nextElement = aScrollBtnsArray.length

            aScrollBtnsArray[nextElement] = obj

        }

    }

    // update the SPAN whose ID is "counterTotal" to reflect total number of focusable items in scrolling span

    counterTotal.innerHTML = aScrollBtnsArray.length

}



function updateCounter()

{

     /* this function updates the numeric value for the item counter found at the lower right of

    each scrollable menu in the templates, to indicate which item currently has focus. */



    if (isCounter != true)

    {

        // if there is no counter on the page, return

        return

    }

    // variable to track whether focus is in scrollable menu

    var bFocusInMenu = false

    //Loop through all focusable items in scrolling menu

    for (i=0; i<aScrollBtnsArray.length; i++)

    {

        // if item currently has focus ...

        if (aScrollBtnsArray[i] == oCurFocus)

        {

            // set counter number to show which item has focus

            counterNum.innerHTML = (i + 1);

            // update variable to indicate focus is in scrollable menu

            bFocusInMenu = true

        }

    }

    // if focus in in menu, make sure arrows are not grayed out.

    if (bFocusInMenu == true)

    {

        itemCounterSpan.style.filter = "none"

    }

    // Else gray out arrows to indicate disabled state.

    else

    {

        itemCounterSpan.style.filter = "alpha(opacity=50)"

    }

}